<template>
  <div class="player">
    <NormalPlayer :songTime="this.totalTime" :currentTime='this.currentTime'></NormalPlayer>
    <MiniPlayer @showList='showList'></MiniPlayer>
    <ListPlayer ref='listPlayer'></ListPlayer>
    <audio :src="this.currentSong.url" ref="audio" @timeupdate="timeupdate" @ended="end"></audio>
  </div>
</template>

<script>
import { getRandom } from '../tools/tools'
import { mapGetters, mapActions } from 'vuex'
import modeType from '../store/modeType'
import NormalPlayer from '../components/player/NormalPlayer.vue'
import MiniPlayer from '../components/player/MiniPlayer.vue'
import ListPlayer from '../components/player/ListPlayer.vue'
export default {
  name: 'Player',
  data () {
    return {
      totalTime: 0,
      currentTime: 0
    }
  },
  computed: {
    ...mapGetters([
      'currentSong',
      'isPlaying',
      'getplayingTime',
      'modeType',
      'getIndex',
      'getSongs',
      'getFavoriteList',
      'getHistoryList'
    ])
  },
  created () {
    const favorite = JSON.parse(window.localStorage.getItem('favoriteList'))
    if (favorite === null) {
      return
    }
    this.setFavoriteListByLocal(favorite)
    const history = JSON.parse(window.localStorage.getItem('historyList'))
    if (history === null) {
      return
    }
    this.setHistoryList(history)
    const mode = JSON.parse(window.localStorage.getItem('localModeType'))
    if (history === null) {
      return
    }
    this.setModeType(mode)
  },
  methods: {
    ...mapActions([
      'setCurrentIndex',
      'setFavoriteListByLocal',
      'setHistorySong',
      'setHistoryList',
      'setModeType'
    ]),
    showList () {
      this.$refs.listPlayer.ishow()
    },
    timeupdate (el) {
      // console.log(el.target.currentTime)
      this.currentTime = el.target.currentTime
    },
    end () {
      if (this.modeType === modeType.loop) {
        this.setCurrentIndex(this.getIndex + 1)
      } else if (this.modeType === modeType.random) {
        let index = getRandom(0, this.getSongs.length - 1)
        while (index === this.getIndex) {
          index = getRandom(0, this.getSongs.length - 1)
        }
        this.setCurrentIndex(index)
      } else {
        this.$refs.audio.play()
      }
    }
  },
  components: {
    NormalPlayer,
    MiniPlayer,
    ListPlayer
  },
  watch: {
    // 控制歌曲播放
    isPlaying (newValue, oldValue) {
      if (newValue) {
        this.$refs.audio.play()
        this.setHistorySong(this.currentSong)
      } else {
        this.$refs.audio.pause()
      }
    },
    // 控制歌曲切换以及时间显示
    // 在ios中，系统永远不会自动加载歌曲/视频，所以oncanplay永远不会自动执行
    // 在pc端，安卓端，系统会自动加载歌曲/视频，所以oncanplay会自动执行
    // 解决方案：如何监听ios中vedio/audio是否准备好了，通过ondurationchange事件监听
    // ondurationchange事件什么时候执行：当歌曲/视频加载完成之后执行，只有加载完成之后才能获取到歌曲/视频
    currentSong (newValue, oldValue) {
      this.$refs.audio.ondurationchange = () => {
        if (this.isPlaying) {
          this.$refs.audio.play()
          this.setHistorySong(newValue)
        } else {
          this.$refs.audio.pause()
        }
        this.totalTime = this.$refs.audio.duration
        // console.log(this.totalTime)
      }
    },
    getplayingTime (newValue, oldValue) {
      this.$refs.audio.currentTime = newValue
    },
    getFavoriteList (newValue, oldValue) {
      window.localStorage.setItem('favoriteList', JSON.stringify(newValue))
    },
    getHistoryList (newValue, oldValue) {
      window.localStorage.setItem('historyList', JSON.stringify(newValue))
    }
  }
}
</script>

<style scoped lang='scss'>
  .player{
    position: relative;//不能为fixed,否则会把App.vue的内容盖住
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
</style>
